<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-07-04 14:48:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-22 10:39:05
 * @FilePath: DelModule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Model :modelShow="props.delModuleShow" width="56" class="run-model-box" alignCenter :cancelShow="false"
            :confirmShow="true" confirmFont="关闭" title="日志详情" @confirm="modelCancel" @cancel="modelCancel">
            <el-form ref="form" :model="props.dataInfo" label-width="90px" size="mini">
                <el-row class='row' :gutter="20">
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="8">
                                <div class="field">用户名称</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="value">{{ props.dataInfo.name }}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="8">
                                <div class="field">操作端</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="value">网站</div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class='row' :gutter="20">
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="8">
                                <div class="field">操作事件</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="value">{{ props.dataInfo.events }}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="8">
                                <div class="field">来源IP</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="value">{{ props.dataInfo.source_ip }}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class='row' :gutter="20">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="4">
                                <div class="field">请求地址</div>
                            </el-col>
                            <el-col :span="20">
                                <div class="value">
                                    {{ props.dataInfo.route }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class='row' :gutter="20">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="4">
                                <div class="field">请求参数</div>
                            </el-col>
                            <el-col :span="20">
                                <div class="value">{{ props.dataInfo.request_param ? props.dataInfo.request_param : '暂无'
                                    }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class='row' :gutter="20">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="4">
                                <div class="field">访问终端信息</div>
                            </el-col>
                            <el-col :span="20">
                                <div class="value">{{ props.dataInfo.request_agent ? props.dataInfo.request_agent : '暂无'
                                    }}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row class='row' :gutter="20">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="4">
                                <div class="field">操作时间</div>
                            </el-col>
                            <el-col :span="20">
                                <div class="value">{{ props.dataInfo.log_create_time }}</div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </Model>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, reactive, watch, nextTick } from 'vue'
import { PiniaStore } from '../../store'
import $util from '../../util/util'
const store = PiniaStore()
interface PropsType {
    delModuleShow?: boolean
    dataInfo?: any
    TypeList?: any
}
const props = withDefaults(defineProps<PropsType>(), {
    delModuleShow: false,
    dataInfo: {},
    TypeList: []
})
interface EmitType {
    (e: 'modelCancel', bol: boolean): void
    (e: 'modelConfirm', item: any): void
}
const emit = defineEmits<EmitType>()
const modelCancel = () => {
    emit('modelCancel', false)
}
// 复制链接地址
const toCopy = (cont: any) => {
    var domUrl = document.createElement('input')
    domUrl.value = JSON.stringify(cont)
    domUrl.id = 'creatDom'
    document.body.appendChild(domUrl)
    domUrl.select() // 选择对象
    document.execCommand('Copy') // 执行浏览器复制命令
    ElMessage.success('已复制成功，可粘贴！')
}
const typeFormat = (item: any) => {
    return $util.selectDictLabel(props.TypeList, item.businessType);
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.row {
    margin-bottom: 15px;
}

.el-row::before,
.el-row::after {
    display: table;
    content: "";
}

.field {
    background: #F5F7FA;
    border: 1px solid #DDDDDD;
    height: 100%;
    text-align: center;
    border-radius: 4px 0px 0px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value {
    border: 1px solid #DDDDDD;
    border-left: 0px;
    height: 100%;
    padding: 0 10px;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
}

.value.active {
    color: #21A97A;

    .el-icon {
        color: #21A97A;
        margin-right: 5px;
    }
}

.danger {
    color: #f56c6c;

    .el-icon {
        color: #f56c6c;
        margin-right: 5px;
    }
}

.col {
    text-align: right;
    color: #666666;
    font-weight: bold;
}

.el-col {
    min-height: 32px;
    line-height: 32px;
}

:deep(.el-form-item) {
    margin-bottom: 10px;
}
</style>